<template>
    <div>
<van-nav-bar
  title="标题"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
<van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image" style="height: 200px;width: 380px;"/>
  </van-swipe-item>
</van-swipe>
<van-grid>
  <van-grid-item :icon="item.image_src" :text="item.name" v-for="item in catitemsApiData"/>
  <van-grid-item :icon="item.image_src" :text="item.name" v-for="item in catitemsApiData"/>
</van-grid>
<div class="ba">
    <van-image
  width="180"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<van-image
  width="180"
  height="150"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<van-image
  width="180"
  height="170"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<van-image
  width="180"
  height="130"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<van-image
  width="180"
  height="180"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
</div>
<div class="bb">
    <van-image
  width="110"
  height="130"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<van-image
  width="110"
  height="160"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<van-image
  width="110"
  height="140"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<van-image
  width="110"
  height="190"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<van-image
  width="110"
  height="120"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
</div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
    ];
    import { catitemsApi } from '@/api/api';
    let catitemsApiData=ref([])
    catitemsApi().then(res=>{
        catitemsApiData.value=res.data.message
        console.log(res);
        
    })
</script>

<style scoped>
.ba{
    width: 180px;
    float: left;
}
.bb{
    width: 180px;
    float: right;
}
</style>